<template>
  <div class="topnav">
    <div class="city">
      <router-link class="cityname" tag="i" to="/index/home/city">
        {{ city }}
      </router-link>
      <span class="iconfont icon-xiajiantou"></span>
    </div>
    <ul>
      <router-link
        :to="item.url"
        tag="li"
        v-for="item of navlist"
        :key="item.url"
      >
        {{ item.title }}
      </router-link>
    </ul>
    <div class="search"><span class="iconfont icon-sousuo"></span></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: localStorage.getItem("cityname") || "杭州",
      navlist: [
        {
          title: "热映",
          url: "/index/home/hot",
        },
        {
          title: "影院",
          url: "/index/home/cinema",
        },
        {
          title: "待映",
          url: "/index/home/wait",
        },
        {
          title: "经典电影",
          url: "/index/home/classics",
        },
      ],
      activeNum: 0,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.topnav {
  width: 100%;
  height: 46px;
  border-bottom: 1px solid @border-color;
  .center();
  justify-content: space-between;
  font-size: @l-font;
  .city {
    font-size: @s-font;
    padding-left: 15px;
    white-space: nowrap;
    .cityname {
      display: inline-block;
      max-width: 55px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    span {
      font-size: @xxs-font;
      margin-left: 2px;
    }
  }
  .icon-sousuo {
    font-size: @xl-font;
    padding: 0 15px;
    color: @m-color;
  }
  ul {
    .center();
    width: 240px;
    li {
      padding: 0 5px;
      margin: 0 5px;
      font-size: 15px;
      font-weight: 900;
      position: relative;
      color: #666;
    }
    .router-link-active {
      font-size: @m-font;
      color: #000;
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 4px;
        left: 50%;
        transform: translateX(-50%);
        bottom: -12px;
        border-radius: 2px;
        background: @m-color;
      }
    }
  }
}
</style>
